<template>
  <guat-page-layout title="角色管理">
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '筛选',
            internal: $config.$button.PLO,
            onClick: () => setDrawerVisible(true),
          },
          {
            text: '添加新角色',
            internal: $config.$button.PLR,
            onClick: () => setModalVisible(true),
            permission: $permission.SYSTEM_ROLE_ADD,
          },
          {
            text: '批量删除',
            internal: $config.$button.RLR,
            permission: $permission.SYSTEM_ROLE_DEL,
          },
        ]"
      />
    </template>
    <guat-role-table />
    <guat-new-and-edit-modal :title="isAdd ? '添加新角色' : '编辑角色信息'">
      <guat-new-and-edit-form />
    </guat-new-and-edit-modal>
    <guat-search-drawer title="查找角色">
      <guat-search-form />
    </guat-search-drawer>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createRoleTable } from "../table-config";
import { createRoleForm } from "../form-config";
import { RoleList as RL } from "@/types/api/role";
import { RolePropertyMap as RPM } from "@/map/role/property-map";
import { GetRoleList } from "@/api/role";

let isAdd = true;

const { warning } = useModalNotice();
const { success } = useMessage();
const {} = useAxios<RL["Req"], RL["Res"], typeof GetRoleList.map>(GetRoleList);
const [GuatRoleTable, { setTableData }] = useTable(
  createRoleTable({
    del: handleOnDelete,
    upd: handleOnEdit,
  })
);
const [GuatSearchDrawer, { setDrawerVisible }] = useDrawer();
const [GuatSearchForm] = useForm(createRoleForm);
const [GuatNewAndEditModal, { setModalVisible }] = useModal();
const [GuatNewAndEditForm] = useForm(createRoleForm);

function handleOnEdit(_record: RL["Table"]) {
  // setFormValue(record);
  setModalVisible(true);
}

function handleOnDelete(record: RL["Table"]) {
  warning({
    title: "删除确认",
    content: `请确认是否要删除角色【 ${record[RPM.Name]} 】?`,
    onOk: () => success("删除成功"),
  });
}

onMounted(() => {
  setTableData([
    {
      roleId: "0",
      roleName: "管理员",
      roleStatus: 0,
      createTime: "2023-04-10 23:12:23",
    },
    {
      roleId: "1",
      roleName: "普通成员",
      roleStatus: 1,
      createTime: "2023-04-10 23:12:23",
    },
  ]);
});
</script>

<style scoped></style>
